<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<style>
			div{
				width: 500px; 
				height: 400px;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<!--使用自定义的v-img指令-->
			<div v-img="'images/b1.jpg'"></div>
		</div>
	
		<script src="https://unpkg.com/vue@next"></script>
		<script>
		    const app = Vue.createApp({
				
			});
			//自定义的v-img指令
			app.directive('img', {
				//当前组件插入到父节点时调用
				mounted: function(el, binding){
					//随机设置其相关的背景颜色
					let color = Math.floor(Math.random() * 1000000);
					el.style.backgroundColor = '#' + color;
					//获取到相关的背景图片
					let img = new Image();
					img.src = binding.value;
					img.onload = function(){
						alert("随机背景色");
						el.style.backgroundImage = 'url(' + binding.value + ')';
					}
				}
			})
			app.mount('#app');
		</script>
	</body>
</html>